<template>
  <div class="v-window-data-select">
    <el-popover ref="popover1"
                trigger="click">
      <div class=" v-window-data-select clear" style="width: 230px; flex-wrap: wrap;">
        <div class="item cursor" v-for="(i,index) in options" :key="index" :class="{'isSelect':isSelect===index}"
             @click="isSelect = index">{{index}}天
        </div>
        <div class="item cursor" @click="add">自定义</div>
      </div>
    </el-popover>
    <el-button plain v-popover:popover1>朴素按钮</el-button>
  </div>
</template>

<script>
  export default {
    name: 'v-window-data-select',
    data () {
      return {
        isSelect: 1,
        options: [1, 2, 3, 4, 5, 6, 7, 8]
      }
    },
    methods: {
      add () {
        this.options.push(9)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .v-window-data-select
    .item
      height 29px
      margin 7px
      float left
      width 62px
      text-align center
      line-height @height
      background rgba(255, 255, 255, 1)
      border-radius 4px
      border 1px #D8DCE5 solid
      font-size 12px
    .isSelect
      background rgba(64, 158, 255, 1)
      color #fff
</style>
